<template>
	<view>
		<view class="logo">
			<image src="../../../static/images/common/logo.png"></image>
		</view>
		<view style="text-align: center;color: #fdda33;" @click="toHome">
			首页
		</view>
		<view v-show="changeOver">
			<!-- // 注册 -->
			<u-form :model="regP" :error-type="['message']" ref="uForm1" style="padding: 0 100rpx;">
				<u-form-item left-icon="phone" prop="username" :left-icon-style="{color:'#fdda33',fontSize:'45rpx'}"
					:border-bottom="false">
					<u-input v-model="regP.username" placeholder="请输入手机号" :custom-style="{fontSize:'35rpx'}" />
				</u-form-item>	
				<u-form-item left-icon="lock" prop="password" :left-icon-style="{color:'#fdda33',fontSize:'45rpx'}"
					:border-bottom="false">
					<u-input v-model="regP.password" type="password" placeholder="请输入密码(6-12位)"
						:custom-style="{fontSize:'35rpx'}" />
				</u-form-item>
			</u-form>
			<view class="codeLogin">
				<view @click="changeOr(false)">验证码登录</view>
			</view>
		</view>
			<!-- // 验证码登录 -->
		<view v-show="!changeOver">
			<u-form :model="regC" :error-type="['message']" ref="uForm" style="padding: 0 100rpx;">
				<u-form-item left-icon="phone" prop="username" :left-icon-style="{color:'#fdda33',fontSize:'45rpx'}"
					:border-bottom="false">
					<u-input v-model="regC.username" placeholder="请输入手机号" :custom-style="{fontSize:'35rpx'}" />
				</u-form-item>	
				<u-form-item left-icon="phone" prop="vercode" :left-icon-style="{color:'#fdda33',fontSize:'45rpx'}"
					:border-bottom="false">
					<u-input v-model="regC.vercode" placeholder="请输入验证码" :custom-style="{fontSize:'35rpx'}" />
					<view slot="right">
						<view style="color: #fff;  background-color: #fdda33;padding:0 10rpx;border-radius: 15rpx;"
							@click="handlerCode">
							{{code>=60?'请发送验证码':`倒计时${code}`}}
						</view>
					</view>
				</u-form-item>
			</u-form>
			<view class="codeLogin">
				<view  @click="changeOr(true)">密码登录</view>
			</view>
		</view>
		<view style="padding: 0 100rpx;">
			<u-button type="warning" :custom-style="{backgroundColor:'#fdd100'}" @click="login">登录</u-button>
		</view>
		<view class="footer">
			<view @click="toRegOrForget('/pages/user/register/register')">注册账号</view>
			<view @click="toRegOrForget('/pages/user/forgetPassword/forgetPassword')">忘记密码</view>
		</view>
	</view>
</template>

<script>
	import { user } from '@/api'
	import { userStore } from '@/stores/userInfo/userInfo.js'
	import { setToken,setTokenExpired } from '@/utils/localStoreToken.js'
	import { validatorPw, validatorUn } from '@/pages/user/validate.js'
	export default {
		data() {
			return {
				toUrl:'',
				goto: 0,
				code: 60,
				falg: true,
				changeOver: true,
				regP: {
					username: '',
					password: '',
				},
				regC: {
					username: '',
					vercode:''
				},
				rules: {
					username: [{
						required: true,
						trigger: ['blur', 'change'],
						validator: validatorUn
					}],
					password: [{
						required: true,
						trigger: ['blur', 'change'],
						validator: validatorPw
					}],
					vercode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
	
		onLoad(options){
			// 保持想去的页面
			if(options.toUrl){
				if(options.toUrl.includes('goodsDetail')) {
					this.toUrl = options.toUrl.slice(30)
					return
				}	
				if(Object.keys(options).length>1) {
					let option1 = Object.entries(options)
					let to = options.toUrl
					for(let i = 1; i< option1.length; i++) {
						to += '&'+ option1[i][0]+ '=' + option1[i][1]
					}
					this.toUrl = to
					return
				}
				this.toUrl = options.toUrl
			}
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules)
			this.$refs.uForm1.setRules(this.rules)
		},
		methods: {
			// 去首页
			toHome(){ 
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getUserInfo(){
				let userS = userStore()
				userS.getUserInfo()
			},
			// 切换
			changeOr(flag) {
				this.changeOver = flag
				if(!flag) {
					let t = this.regP.username
					this.regC.username = t
					this.$refs.uForm.resetFields()
				}else{
					let t = this.regC.username
					this.regP.username = t
					this.$refs.uForm1.resetFields()
				}
				this.regP.password = ''
				this.regC.vercode = ''
			},
			// 获取登录
			getLogin(data){
				user.reqLogin(data).then(res => {
					if(res.code === 0) {
						uni.$u.toast('登录成功')
						let { token, tokenExpired} = res
						setToken(token)
						setTokenExpired(tokenExpired)
						this.getUserInfo()
						setTimeout(() => {
							if(this.toUrl){
								uni.redirectTo({
									url: this.toUrl
								})
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						},1000)
					}else{
						uni.$u.toast(res.msg)
					}
				})
			},
			// 登录
			login() {
				let {regP, regC} = this
				if(this.changeOver) {
					// 密码登录
					this.$refs.uForm1.validate(valid => {
						if(valid){
							this.getLogin(regP)
						}else {
							console.log(valid)
						}
					})
				}else {
					// 验证码登录
					this.$refs.uForm.validate(valid => {
						if(valid){
							this.getLogin(regC)
						}else {
							console.log(valid)
						}
					})
				}
			
			},
			// 跳转到注册或者忘记密码
			toRegOrForget(url) {
				uni.navigateTo({
					url
				})
			},
			getSms(){
				let params = {
					mobile: this.regC.username,
					type: 'login'
				}
				user.reqSendSms(params).then(res => {
					if(res.code === 0) {
						uni.$u.toast(res.msg)
						this.regC.vercode = res.data
					}else {
						uni.$u.toast(res.msg)
					}
				})
			},
			handlerCode() {
				if(this.regC.username === '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				if (!this.falg) {
					uni.$u.toast(`请等倒计时结束${this.code}`)
					return
				}
				this.falg = false
				let time = setInterval(() => {
					this.code--
					if (this.code < 0) {
						this.falg= true
						this.code = 60
						clearInterval(time)
					}
				}, 1000)
				this.getSms()
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}
	.codeLogin{
		padding: 0 100rpx;
		text-align: right;
		color: #fdd100;
		margin: 20rpx 0;
	}
	.footer{
		margin: 30rpx 0;
		padding: 0 100rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		text-align: center;
		font-size: 28rpx;
		view:first-child{
			color: #fdd100;
		}
	}
	
</style>
